<div class="box">
  <div class="box-header"><span class="title">xCharts</span></div>
  <div class="box-content padded">
    <div class="sine-chart" style="height: 300px" id="xchart-sine"></div>
  </div>
</div>

<div class="box">
  <div class="box-header"><span class="title">Gauges</span></div>
  <div class="box-content padded" style="text-align: center">
    <div class="justgage" data-title="Normal" id="<%= random_string %>"></div>
    <div class="justgage" data-title="No labels" data-labels="false" id="<%= random_string %>"></div>
    <div class="justgage" data-title="Custom Width" data-gauge-width-scale="0.2" id="<%= random_string %>"></div>
    <div class="justgage" data-title="Custom Animation" data-animation-type="bounce" id="<%= random_string %>"></div>
  </div>
</div>

<div class="row-fluid">

  <div class="span6">
    <div class="box">
      <div class="box-header"><span class="title">More xCharts</span></div>
      <div class="box-content padded">
        <div class="xcharts-line-dotted" style="width: 100%; height: 300px"></div>
      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">More xCharts</span>
        <ul class="box-toolbar">
          <li><a id="randomize-bar-chart" class="btn btn-blue btn-mini">Randomize!</a></li>
        </ul>
      </div>
      <div class="box-content padded">
        <div class="xcharts-bar" style="width: 100%; height: 300px"></div>
      </div>
    </div>
  </div>
</div>


<div class="box">
  <div class="box-header"><span class="title">Easy Pie charts</span></div>
  <div class="box-content padded separate-sections" style="text-align: center">
    <div class="easy-pie-chart" style="display: inline-block; margin-left: 20px;" data-percent="89"><span>89%</span></div>
    <div class="easy-pie-chart" style="display: inline-block; margin-left: 20px;" data-percent="73" data-color="orange"><span>73%</span></div>
    <div class="easy-pie-chart" style="display: inline-block; margin-left: 20px;" data-percent="33" data-color="green"><span>33%</span></div>
    <div class="easy-pie-chart" style="display: inline-block; margin-left: 20px;" data-percent="64" data-color="blue"><span>64%</span></div>
  </div>
</div>


<div class="box">
  <div class="box-header"><span class="title">Responsive Sparkline charts</span></div>
  <div class="box-content padded">
    <div class="row-fluid separate-sections">

      <div class="span2">
        <div class="spark-pie"></div>
      </div>

      <div class="span4">
        <div class="spark-mouse"></div>
      </div>

      <div class="span4">
        <div class="spark-composite"></div>
      </div>

      <div class="span2 separate-sections text-center">
        <div class="sparkline big"><!--<%= random_numbers(12).join(",") %>--></div>
        <div class="sparkline big" data-color="blue"><!--<%= random_numbers(12).join(",") %>--></div>
        <div class="sparkline big" data-color="orange"><!--<%= random_numbers(12).join(",") %>--></div>
        <div class="sparkline big" data-color="green"><!--<%= random_numbers(12).join(",") %>--></div>
      </div>
    </div>

  </div>
</div>

